﻿<FluentKeyCode Anchor="MyCard" OnKeyDown="@KeyDownHandler" />
<FluentKeyCode Anchor="MyKey" OnKeyDown="@KeyDownHandler" StopPropagation="true" />

<FluentStack>
    <FluentCard Id="MyCard" tabindex="0" Width="300px" Height="140px">
        Click here and press <span tabindex="0" id="MyKey">any key</span> to get the event keycode info.
    </FluentCard>

    <ul>
        <li><span>Value:</span> <code>@LastKeyCode?.Value</code></li>
        <li><span>Key:</span> <code>@LastKeyCode?.Key.ToString()</code></li>
        <li><span>Code:</span> <code>@LastKeyCode?.KeyCode</code></li>
        <li><span>Meta:</span> 
            @if (LastKeyCode?.ShiftKey == true)
            {
                <FluentIcon Value="@(new Icons.Filled.Size20.KeyboardShift())" />
            }
            else
            {
                <FluentIcon Value="@(new Icons.Regular.Size20.KeyboardShift())" Color="Color.Neutral" />
            }
            @if (LastKeyCode?.CtrlKey == true)
            {
                <FluentIcon Value="@(new Icons.Filled.Size20.ControlButton())" />
            }
            else
            {
                <FluentIcon Value="@(new Icons.Regular.Size20.ControlButton())" Color="Color.Neutral" />
            }
            @if (LastKeyCode?.AltKey == true)
            {
                <FluentIcon Value="@(new Icons.Filled.Size20.KeyCommand())" />
            }
            else
            {
                <FluentIcon Value="@(new Icons.Regular.Size20.KeyCommand())" Color="Color.Neutral" />
            }
            @if (LastKeyCode?.MetaKey == true)
            {
                <FluentIcon Value="@(new Icons.Filled.Size20.ArrowBounce())" />
            }
            else
            {
                <FluentIcon Value="@(new Icons.Regular.Size20.ArrowBounce())" Color="Color.Neutral" />
            }
        </li>
        <li><span>Location:</span> <code>@LastKeyCode?.Location.ToString()</code></li>
        <li><span>TargetId:</span> <code>@LastKeyCode?.TargetId</code></li>
    </ul>
</FluentStack>

<style>
    li > span {
        float: left;
        width: 70px;
        font-weight: bold;
    }
</style>

@code
{
    FluentKeyCodeEventArgs? LastKeyCode;

    void KeyDownHandler(FluentKeyCodeEventArgs e)
    {
        LastKeyCode = e;
    }
}
